src/app/(service)/(my)/my-study-review/_components/use-expandable-content.tsx-8-16 (1)

8-16: ⚠️ Potential issue | 🟡 Minor

content 변경 시 showButton 상태가 업데이트되지 않습니다.

useEffect의 의존성 배열이 비어있어 컴포넌트 마운트 시에만 실행됩니다. content가 동적으로 변경되면 버튼 표시 여부가 재계산되지 않아 UI가 올바르게 업데이트되지 않을 수 있습니다.

🐛 의존성 배열에 content 추가 제안

   useEffect(() => {
     if (contentRef.current) {
       const lineHeight =
         parseInt(window.getComputedStyle(contentRef.current).lineHeight, 10) ||
         20;
       const maxHeight = lineHeight * 3;
       setShowButton(contentRef.current.scrollHeight > maxHeight);
     }
-  }, []);
+  }, [content]);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@src/app/`(service)/(my)/my-study-review/_components/use-expandable-content.tsx
around lines 8 - 16, The effect that calculates whether to show the expand
button (inside useEffect using contentRef, calculating lineHeight and maxHeight
and calling setShowButton) only runs on mount because its dependency array is
empty; update the dependency array to include the dynamic value(s) that should
retrigger recalculation—at minimum include content (and optionally
contentRef.current if needed) so that when content changes the effect reruns and
setShowButton updates accordingly. Ensure the useEffect references remain
correct (contentRef, setShowButton, and any helpers used to compute lineHeight)
so React linter warnings are satisfied.

src/app/(service)/(my)/my-study-review/_components/review-page-content.tsx-145-149 (1)

145-149: ⚠️ Potential issue | 🟡 Minor

onClick에 fetchNextPage를 직접 전달하는 대신 화살표 함수로 감싸세요.

useInfiniteQuery에서 반환되는 fetchNextPage를 직접 전달하면 클릭 이벤트 객체가 함수의 첫 번째 인자로 전달될 수 있습니다. 프로젝트 코드베이스의 다른 곳(예: one-to-one/page.tsx 라인 65)에서 이미 onClick={() => fetchNextPage()}로 올바르게 구현하고 있으므로 동일한 패턴을 적용해야 합니다.

제안 수정

-            onClick={fetchNextPage}
+            onClick={() => fetchNextPage()}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/app/`(service)/(my)/my-study-review/_components/review-page-content.tsx
around lines 145 - 149, The onClick currently passes fetchNextPage directly
which may receive the click event as its first argument; change the handler to
an arrow function so it calls fetchNextPage without passing the event (i.e.,
replace onClick={fetchNextPage} with onClick={() => fetchNextPage()}) on the
button that is rendered when hasNextPage is true to match the pattern used
elsewhere (e.g., one-to-one/page.tsx) and avoid unintended arguments being
forwarded.

src/components/common/modals/group-study-review-modal.tsx-235-254 (1)

235-254: ⚠️ Potential issue | 🟡 Minor

만족도 토글의 선택 상태를 보조기기에 알려주세요.

지금은 시각적으로만 활성 상태가 바뀌어서 스크린리더가 현재 선택을 읽어주지 못합니다. 최소한 aria-pressed={isSelected}를 넣거나 라디오 그룹 semantics로 바꾸는 편이 안전합니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/common/modals/group-study-review-modal.tsx` around lines 235 -
254, The visual-only toggle button in group-study-review-modal.tsx needs
accessible state so screen readers announce selection; update the button element
that uses isSelected/onClick/label/emoji to include an ARIA state such as
aria-pressed={isSelected} (or switch to proper radio-group semantics if this is
part of a mutually exclusive set), and ensure the element has an appropriate
role/keyboard behavior if you change semantics; add aria-pressed to the existing
<button> for the quickest fix.

src/components/common/modals/study-completion-modal.tsx-45-74 (1)

45-74: ⚠️ Potential issue | 🟡 Minor

닫힐 때 requestAnimationFrame 루프를 취소하지 않고 있습니다.

캔버스를 제거해도 이미 예약된 프레임은 3초 동안 계속 돌아갑니다. 빠르게 열고 닫으면 불필요한 애니메이션 루프가 겹칠 수 있습니다.

수정 예시

-    const frame = () => {
-      if (Date.now() > end) return;
+    let rafId: number | null = null;
+    let cancelled = false;
+
+    const frame = () => {
+      if (cancelled || Date.now() > end) return;
@@
-      requestAnimationFrame(frame);
+      rafId = requestAnimationFrame(frame);
     };
@@
     return () => {
+      cancelled = true;
+      if (rafId !== null) cancelAnimationFrame(rafId);
       if (canvasRef.current) {
         canvasRef.current.remove();
         canvasRef.current = null;
       }
       confettiRef.current = null;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/common/modals/study-completion-modal.tsx` around lines 45 -
74, The frame animation loop created by function frame uses
requestAnimationFrame but never cancels it on unmount, causing lingering loops;
fix by storing the requestAnimationFrame id (e.g., in confettiRef or a new
rafRef) each time you call requestAnimationFrame(frame), check a cancellation
flag or confettiRef before scheduling the next frame, and call
cancelAnimationFrame(storedId) in the cleanup return block (along with removing
the canvas and clearing refs) so the loop is properly stopped when the modal
unmounts or the canvas is removed.

src/app/(service)/(my)/my-study-review/_components/completed-study-review-page.tsx-91-97 (1)

91-97: ⚠️ Potential issue | 🟡 Minor

memberId가 null일 때 쿼리가 실행될 수 있습니다.

memberId ?? 0으로 0을 전달하면 쿼리가 실행되어 잘못된 데이터를 요청할 수 있습니다. useMemberStudyListQuery에 enabled 조건을 추가하거나, memberId가 없을 때 early return을 고려해주세요.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@src/app/`(service)/(my)/my-study-review/_components/completed-study-review-page.tsx
around lines 91 - 97, The query may run with memberId null because we pass
memberId ?? 0 to useMemberStudyListQuery; update the call to avoid executing
when memberId is falsy by adding an enabled flag (e.g. enabled:
Boolean(memberId)) or by returning early when memberId is null/undefined before
calling useMemberStudyListQuery; refer to useMemberStudyListQuery, memberId, and
completedStudyResponse to locate and gate the query.

src/components/common/ui/star-rating-input.tsx (1)

13-19: roundToNearestHalf 함수의 불필요한 조건 분기

num === 0일 때의 특별 처리가 불필요합니다. Math.round(0 * 2) / 2는 항상 0을 반환하므로, .toFixed(1)을 적용하고 Number()로 변환해도 결과는 동일합니다.

♻️ 간소화된 구현 제안

 const roundToNearestHalf = (num: number) => {
-  if (num === 0) {
-    return Number((Math.round(num * 2) / 2).toFixed(1));
-  }
-
   return Math.round(num * 2) / 2;
 };

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/common/ui/star-rating-input.tsx` around lines 13 - 19, The
special-case branch in roundToNearestHalf is unnecessary; remove the if (num ===
0) block and simplify the function to always return Math.round(num * 2) / 2 so
zero and other values are handled uniformly; update the function
roundToNearestHalf to a single return expression and ensure callers still expect
a number (no toFixed/Number conversion).

src/app/(service)/(my)/my-study-review/_components/review-page-content.tsx (1)

11-11: 상대 경로 import 대신 @/ alias로 맞춰 주세요.

이 훅도 @/app/(service)/(my)/my-study-review/_components/use-expandable-content처럼 절대 경로로 통일하는 편이 좋겠습니다.

As per coding guidelines, Component path aliases: use @/ prefix mapped to ./src/ (configured in tsconfig.json) for all imports.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/app/`(service)/(my)/my-study-review/_components/review-page-content.tsx
at line 11, Replace the relative import of the hook useExpandableContent (import
{ useExpandableContent } from './use-expandable-content') with the project alias
form that begins with '@/...' so it matches the tsconfig alias convention;
update the import statement to use the alias-prefixed module path (keeping the
same exported symbol useExpandableContent) to make imports consistent with other
components.

src/app/(service)/(my)/my-study-review/group/page.tsx (1)

3-3: 신규 페이지 import도 @/ alias로 맞춰 주세요.

이 경로는 @/app/(service)/(my)/my-study-review/_components/completed-study-review-page로 통일하는 편이 좋겠습니다.

As per coding guidelines, Component path aliases: use @/ prefix mapped to ./src/ (configured in tsconfig.json) for all imports.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/app/`(service)/(my)/my-study-review/group/page.tsx at line 3, The import
in page.tsx uses a relative path for CompletedStudyReviewPage; update the import
to use the project path alias by replacing the relative import with
"@/app/(service)/(my)/my-study-review/_components/completed-study-review-page"
so CompletedStudyReviewPage is imported via the `@/` alias (adjust the import
statement in page.tsx to reference that module).

src/app/(service)/(my)/my-study-review/_components/study-review-tab-nav.tsx (1)

19-48: 활성 탭 상태를 보조기기에 노출해 주세요.

지금은 활성 여부가 스타일로만 표현돼서 스크린 리더가 현재 페이지를 알기 어렵습니다. active 항목에 현재 페이지를 나타내는 속성(예: aria-current="page")을 추가해 두는 편이 좋겠습니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/app/`(service)/(my)/my-study-review/_components/study-review-tab-nav.tsx
around lines 19 - 48, The three tab buttons in the StudyReviewTabNav component
(the buttons that call router.push(...) for '/my-study-review/one-to-one',
'/my-study-review/group', '/my-study-review/mentor' and use cn(tabClassName,
isActive(...) && pathClassName)) rely only on visual styling to show the active
state; update each button to include an accessibility attribute when active
(e.g., add aria-current="page" when isActive('/my-study-review/...') is true) so
screen readers can detect the current page—use the existing isActive(...) check
for each button to conditionally set aria-current.

src/app/(service)/(my)/my-study-review/mentor/page.tsx (1)

3-3: 여기도 @/ alias import로 통일해 주세요.

../_components/completed-study-review-page보다 절대 경로 import가 유지보수에 더 안정적입니다.

As per coding guidelines, Component path aliases: use @/ prefix mapped to ./src/ (configured in tsconfig.json) for all imports.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/app/`(service)/(my)/my-study-review/mentor/page.tsx at line 3, The import
for CompletedStudyReviewPage currently uses a relative path; update the import
to use the project alias (`@/`) mapped to ./src/ to follow the Component path
aliases guideline. Replace the line importing CompletedStudyReviewPage (import
CompletedStudyReviewPage from '../_components/completed-study-review-page') with
an alias import that starts with "@/..." pointing to the same module, ensuring
the symbol CompletedStudyReviewPage and the module name
completed-study-review-page remain unchanged so other references continue to
work. Verify TypeScript resolves the alias (tsconfig paths) and run a quick
build/type-check to confirm no import errors.

src/app/(service)/(my)/my-study-review/one-to-one/_components/one-to-one-review-card.tsx (1)

7-7: 상대 경로 import 대신 @/ alias로 통일해 주세요.

../../_components/use-expandable-content보다 @/app/(service)/(my)/my-study-review/_components/use-expandable-content가 이동/리팩터링에 더 안전합니다.

As per coding guidelines, Component path aliases: use @/ prefix mapped to ./src/ (configured in tsconfig.json) for all imports.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@src/app/`(service)/(my)/my-study-review/one-to-one/_components/one-to-one-review-card.tsx
at line 7, Replace the relative import of useExpandableContent with the project
alias: update the import statement that currently references
'../../_components/use-expandable-content' in one-to-one-review-card.tsx to use
the alias module
'@/app/(service)/(my)/my-study-review/_components/use-expandable-content' and
keep the imported symbol name useExpandableContent unchanged so tooling and
refactors resolve correctly.

src/components/forms/group-study-form.tsx (1)

24-25: context와 hook을 전용 모듈로 분리하세요.

step1-group.tsx가 이 파일에서 useMode를 가져오면서 순환 의존이 발생합니다: group-study-form.tsx → step1-group.tsx → group-study-form.tsx. useMode와 useClassification을 별도 파일(예: src/contexts/group-study-mode.ts)로 추출하면 이 의존성을 제거하고 초기화 순서와 HMR 안정성을 개선할 수 있습니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/forms/group-study-form.tsx` around lines 24 - 25, Extract the
ModeContext and useMode (and useClassification if present) into a dedicated
module (e.g., a new src/contexts/group-study-mode.ts) so they are no longer
defined inside group-study-form.tsx; move the createContext<'create' |
'edit'>('create') declaration and the export const useMode hook into that new
file, export both the context and hook, then update group-study-form.tsx and
step1-group.tsx to import ModeContext/useMode (and useClassification) from the
new module; ensure you remove the original declarations from
group-study-form.tsx to break the circular dependency and keep the same exported
identifiers (ModeContext, useMode, useClassification) so callers need minimal
changes.

src/components/common/modals/group-study-review-modal.tsx (1)

56-56: 금지된 arbitrary Tailwind 값이 여러 곳에 들어가 있습니다.

max-w-[360px], h-[120px], h-[52px], w-[52px], text-[28px]는 저장소 규칙상 토큰 클래스로 치환해야 합니다.

As per coding guidelines Forbidden: Tailwind arbitrary values (e.g., p-[4px], w-[320px]). Use only project custom design tokens.

Also applies to: 174-174, 245-250

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/common/modals/group-study-review-modal.tsx` at line 56,
Replace all forbidden arbitrary Tailwind utilities (max-w-[360px], h-[120px],
h-[52px], w-[52px], text-[28px]) with the project's design-token classes; locate
the usages in the JSX (e.g., the Modal.Title element and the avatar/box elements
that currently use those bracketed utilities) and swap each arbitrary value for
the equivalent token class (or add a new design token if none exists), updating
the className strings accordingly so only approved token classes remain.

src/app/(service)/(my)/my-study-review/group/_components/evaluation-section.tsx (1)

30-30: min-h-[280px]는 토큰 클래스로 바꿔주세요.

저장소 규칙상 arbitrary Tailwind 값은 허용되지 않습니다.

As per coding guidelines Forbidden: Tailwind arbitrary values (e.g., p-[4px], w-[320px]). Use only project custom design tokens.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@src/app/`(service)/(my)/my-study-review/group/_components/evaluation-section.tsx
at line 30, The div in evaluation-section.tsx uses an arbitrary Tailwind class
min-h-[280px] which violates the project's rule against arbitrary values;
replace that class with the appropriate project design token class (the
component's root div with className "rounded-100 border-border-subtle
min-h-[280px] border p-200") — find the matching min-height token from the
design token token set (or use the existing project token naming convention,
e.g., min-h-XXX) and update the className to use that token instead of
min-h-[280px].

src/components/common/modals/study-completion-modal.tsx (1)

53-60: 테마 토큰 대신 하드코딩된 값이 들어가 있습니다.

여기의 hex 색상들과 text-[64px]는 저장소 규칙과 맞지 않습니다. CSS 변수나 프로젝트 토큰을 읽어서 쓰는 쪽이 테마 변경에도 안전합니다.

As per coding guidelines Forbidden: Hard-coded colors and spacing values. Use only @theme inline tokens from global.css and custom Tailwind classes.

Also applies to: 88-88

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/common/modals/study-completion-modal.tsx` around lines 53 -
60, The confetti color hexes and the hardcoded `text-[64px]` in the
StudyCompletionModal are forbidden; locate the confetti invocations (calls to
fire(...) with the colors: [...] arrays) and replace the hard-coded hex values
with the theme color tokens or CSS variables exposed in global.css (use the same
token names your project uses for primary/accent/grape/amber/green), and replace
`text-[64px]` with the appropriate project Tailwind/custom class (or an `@theme`
inline token class) that maps to the 64px size; ensure you read tokens from the
global theme (or use var(--your-token)) rather than literals so theme changes
apply consistently.

src/hooks/queries/group-study-review-api.ts (1)

130-136: 순차적 캐시 무효화를 병렬로 처리하면 성능이 개선됩니다.

현재 await를 순차적으로 호출하고 있어 두 무효화 작업이 직렬로 실행됩니다. Promise.all로 병렬 처리하면 약간의 성능 향상이 가능합니다.

♻️ 병렬 무효화 제안

 onSuccess: async (_, variables) => {
-  await queryClient.invalidateQueries({
-    queryKey: groupStudyReviewQueryKeys.lists(),
-  });
-  await queryClient.invalidateQueries({
-    queryKey: groupStudyReviewQueryKeys.written(variables.groupStudyId),
-  });
+  await Promise.all([
+    queryClient.invalidateQueries({
+      queryKey: groupStudyReviewQueryKeys.lists(),
+    }),
+    queryClient.invalidateQueries({
+      queryKey: groupStudyReviewQueryKeys.written(variables.groupStudyId),
+    }),
+  ]);
 },

Also applies to: 154-161

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/hooks/queries/group-study-review-api.ts` around lines 130 - 136, In the
onSuccess callback where you currently await queryClient.invalidateQueries twice
in sequence (using groupStudyReviewQueryKeys.lists() and
groupStudyReviewQueryKeys.written(variables.groupStudyId)), run both
invalidations in parallel with Promise.all to avoid serial waits; update the
onSuccess handler that calls queryClient.invalidateQueries with
groupStudyReviewQueryKeys.lists() and groupStudyReviewQueryKeys.written(...) to
invoke them inside Promise.all, and make the same change for the similar block
referenced around lines 154-161.

src/app/(service)/(my)/my-study-review/_components/completed-study-review-page.tsx (3)

8-8: 다이나믹 임포트 패턴이 일관되지 않습니다.

StudyCompletionModal과 StudyReviewModal은 dynamic()으로 지연 로딩하지만, GroupStudyReviewModal은 직접 임포트합니다. 모달의 크기와 사용 빈도가 유사하다면 일관된 패턴을 적용하는 것이 좋습니다.

♻️ 일관된 다이나믹 임포트 적용

-import GroupStudyReviewModal from '@/components/common/modals/group-study-review-modal';

+const GroupStudyReviewModal = dynamic(
+  () => import('@/components/common/modals/group-study-review-modal'),
+  { ssr: false },
+);

Also applies to: 17-25

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@src/app/`(service)/(my)/my-study-review/_components/completed-study-review-page.tsx
at line 8, The import of GroupStudyReviewModal is inconsistent with the
lazy/dynamic pattern used for StudyCompletionModal and StudyReviewModal; replace
the direct import of GroupStudyReviewModal with a dynamic import using the same
dynamic() helper used for StudyCompletionModal and StudyReviewModal so all
modals are loaded lazily and consistently; update any references in the
component (e.g., CompletedStudyReviewPage render logic) to use the dynamically
imported GroupStudyReviewModal identifier and ensure props and default export
usage remain unchanged.

---

58-65: studyId는 필수 필드이므로 nullish coalescing이 불필요합니다.

MemberStudyItem 타입에서 studyId: number는 필수 필드입니다 (context snippet 1 참조). study.studyId ?? index 대신 study.studyId만 사용해도 됩니다.

♻️ 간소화 제안

 {studies.map((study, index) => (
   <MemberStudyCard
-    key={study.studyId ?? index}
+    key={study.studyId}
     study={study}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@src/app/`(service)/(my)/my-study-review/_components/completed-study-review-page.tsx
around lines 58 - 65, The key for the mapped MemberStudyCard should use the
required studyId instead of a fallback; update the studies.map callback so the
key is study.studyId (remove the nullish coalescing `?? index`) — locate the
mapping that renders <MemberStudyCard ... /> in the studies.map, and replace the
key expression `study.studyId ?? index` with `study.studyId` to rely on the
required field defined on MemberStudyItem.

---

110-125: 쿼리 키 불일치로 캐시 무효화가 누락됩니다.

이 컴포넌트는 ['study-review', 'written', studyType, study.studyId] 쿼리 키를 사용하지만, useCreateGroupStudyReview는 groupStudyReviewQueryKeys.written(groupStudyId)를 무효화합니다 (src/hooks/queries/group-study-review-api.ts 참조). 이로 인해 후기 작성 후에도 이 컴포넌트의 eligibility 체크가 갱신되지 않습니다.

submittedStudyIds 상태로 세션 내에서는 해결되지만, 다른 탭이나 새로고침 시에는 캐시 불일치가 발생할 수 있습니다.

♻️ 권장 수정: 기존 쿼리 키 패턴 사용

+import { groupStudyReviewQueryKeys } from '@/hooks/queries/group-study-review-api';

 const writtenResults = useQueries({
   queries: participantStudies.map((study) => ({
-    queryKey: ['study-review', 'written', studyType, study.studyId],
+    queryKey: studyType === 'ONE_ON_ONE_STUDY'
+      ? ['study-review', 'written', studyType, study.studyId]
+      : groupStudyReviewQueryKeys.written(study.studyId),
     queryFn: async () => {

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@src/app/`(service)/(my)/my-study-review/_components/completed-study-review-page.tsx
around lines 110 - 125, The hardcoded queryKey array in the writtenResults
useQueries call causes cache mismatches with the invalidation performed by
useCreateGroupStudyReview; change the queryKey logic to use the shared query-key
generators instead of a custom array — i.e., for group studies use
groupStudyReviewQueryKeys.written(study.studyId) and for one-on-one studies use
the corresponding one-on-one review query key generator (import the existing key
helpers used elsewhere) so that invalidation from useCreateGroupStudyReview
actually refreshes writtenResults; update imports to bring in
groupStudyReviewQueryKeys (and the one-on-one key helper) and replace the
queryKey assignment inside the map accordingly.

src/app/(service)/(my)/my-study-review/group/[groupStudyId]/_components/evaluation-section.tsx (1)

30-30: 코딩 가이드라인 위반: 임의 값 사용

min-h-[280px]는 Tailwind 임의 값입니다. 프로젝트 가이드라인에 따라 커스텀 디자인 토큰만 사용해야 합니다.

♻️ 수정 제안

프로젝트의 spacing 토큰을 확인하여 적절한 값으로 대체하거나, 필요시 global.css에 새로운 토큰을 추가하세요.

-    <div className="rounded-100 border-border-subtle min-h-[280px] border p-200">
+    <div className="rounded-100 border-border-subtle min-h-3500 border p-200">

(실제 토큰 값은 프로젝트의 디자인 시스템에 맞게 조정 필요)

As per coding guidelines: Forbidden: Tailwind arbitrary values (e.g., p-[4px], w-[320px]). Use only project custom design tokens.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@src/app/`(service)/(my)/my-study-review/group/[groupStudyId]/_components/evaluation-section.tsx
at line 30, The div in EvaluationSection component uses a Tailwind arbitrary
value `min-h-[280px]`, violating the project's design-token-only rule; replace
that arbitrary class with the appropriate project spacing token class (e.g., the
component's existing spacing token such as a min-h token from your design
system) on the element in evaluation-section.tsx (the div with className
including rounded-100 border-border-subtle min-h-[280px] border p-200), and if
no suitable token exists add a new min-height token in global.css (naming
consistent with other tokens) then update the className to use that token.

src/app/(service)/(my)/my-study-review/group/[groupStudyId]/page.tsx (1)

12-15: Import 순서 정리 필요

린터 경고에 따르면 GroupReviewCard import가 SatisfactionSection import보다 앞에 와야 합니다.

♻️ 수정 제안

 import EvaluationSection from './_components/evaluation-section';
+import GroupReviewCard from './_components/group-review-card';
 import SatisfactionSection from './_components/satisfaction-section';
 import { useReviewStatistics } from './_hooks/use-review-statistics';
-import GroupReviewCard from './_components/group-review-card';

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/app/`(service)/(my)/my-study-review/group/[groupStudyId]/page.tsx around
lines 12 - 15, Import order is incorrect: move the GroupReviewCard import so it
appears before SatisfactionSection to satisfy the linter. Open the imports at
the top of page.tsx and reorder the lines so GroupReviewCard is imported prior
to SatisfactionSection (keeping EvaluationSection and useReviewStatistics
positions as needed), then save and re-run the linter/formatter to confirm the
warning is resolved.

src/app/(service)/(my)/my-study-review/mentor/[groupStudyId]/page.tsx (1)

13-17: 상대 경로 대신 @/ alias 사용 권장

코딩 가이드라인에 따라 모든 import에 @/ prefix를 사용해야 합니다. 또한 린터 경고에 따르면 import 순서도 정리가 필요합니다.

♻️ 수정 제안

-import { useReviewStatistics } from '../../group/[groupStudyId]/_hooks/use-review-statistics';
-
-import EvaluationSection from '../../group/[groupStudyId]/_components/evaluation-section';
-import SatisfactionSection from '../../group/[groupStudyId]/_components/satisfaction-section';
-import GroupReviewCard from '../../group/[groupStudyId]/_components/group-review-card';
+import EvaluationSection from '@/app/(service)/(my)/my-study-review/group/[groupStudyId]/_components/evaluation-section';
+import GroupReviewCard from '@/app/(service)/(my)/my-study-review/group/[groupStudyId]/_components/group-review-card';
+import SatisfactionSection from '@/app/(service)/(my)/my-study-review/group/[groupStudyId]/_components/satisfaction-section';
+import { useReviewStatistics } from '@/app/(service)/(my)/my-study-review/group/[groupStudyId]/_hooks/use-review-statistics';

As per coding guidelines: Component path aliases: use @/ prefix mapped to ./src/ (configured in tsconfig.json) for all imports.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/app/`(service)/(my)/my-study-review/mentor/[groupStudyId]/page.tsx around
lines 13 - 17, The imports in page.tsx use relative paths instead of the project
alias and violate import ordering rules; update the four imports
(useReviewStatistics, EvaluationSection, SatisfactionSection, GroupReviewCard)
to use the "@/..." alias that maps to ./src/, and reorder them to satisfy the
linter (group external modules, then "@/..." imports, alphabetize or follow your
repo's import-order rules) so the linter warnings go away.

src/app/(service)/(my)/my-study-review/group/[groupStudyId]/_components/satisfaction-section.tsx (1)

71-71: 코딩 가이드라인 위반: 임의 값 사용

sm:w-[88px]와 sm:w-[96px] (lines 71, 83, 89, 101)는 Tailwind 임의 값입니다. 프로젝트 디자인 토큰을 사용해야 합니다.

♻️ 수정 제안

프로젝트의 width 토큰으로 대체하거나, 반복적으로 사용되는 값이라면 global.css에 커스텀 토큰을 추가하세요.

-              <div className="flex items-center gap-75 sm:w-[88px] sm:shrink-0">
+              <div className="flex items-center gap-75 sm:w-1100 sm:shrink-0">
...
-              <span className="font-designer-14m text-text-subtle shrink-0 text-left tabular-nums sm:w-[96px] sm:text-right">
+              <span className="font-designer-14m text-text-subtle shrink-0 text-left tabular-nums sm:w-1200 sm:text-right">

(실제 토큰 값은 프로젝트 디자인 시스템 확인 필요)

As per coding guidelines: Forbidden: Tailwind arbitrary values (e.g., p-[4px], w-[320px]). Use only project custom design tokens.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@src/app/`(service)/(my)/my-study-review/group/[groupStudyId]/_components/satisfaction-section.tsx
at line 71, Replace the Tailwind arbitrary width values in the
satisfaction-section component with your project's design tokens: locate the div
that contains the class string "flex items-center gap-75 sm:w-[88px]
sm:shrink-0" (and the other occurrences using sm:w-[96px]) in
src/app/.../satisfaction-section.tsx, remove the arbitrary
sm:w-[88px]/sm:w-[96px] values and swap them for the appropriate project width
token class (e.g., sm:w-{your-token}) or a named utility; if the required width
token does not exist, add a CSS variable/utility in global.css (e.g.,
--width-<name> and a .w-<name> helper) and then use that token/helper in the
component classNames instead of the arbitrary bracket syntax.

src/app/(service)/(my)/my-study-review/group/[groupStudyId]/_components/group-review-card.tsx (1)

7-7: @/ 경로 alias 사용 권장

코딩 가이드라인에 따라 모든 import에 @/ prefix를 사용해야 합니다.

♻️ 수정 제안

-import { useExpandableContent } from '../../../_components/use-expandable-content';
+import { useExpandableContent } from '@/app/(service)/(my)/my-study-review/_components/use-expandable-content';

As per coding guidelines: Component path aliases: use @/ prefix mapped to ./src/ (configured in tsconfig.json) for all imports.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@src/app/`(service)/(my)/my-study-review/group/[groupStudyId]/_components/group-review-card.tsx
at line 7, Replace the relative import for useExpandableContent in
group-review-card.tsx with the project path-alias form: locate the import of
useExpandableContent in the file (symbol: useExpandableContent) and change the
module specifier to use the '@/...' alias that maps to ./src/ per tsconfig
(e.g., replace '../../../_components/use-expandable-content' with the
corresponding '@/...' path to the same module), ensuring the import uses the
alias style required by the coding guidelines.

src/components/common/modals/group-study-review-modal.tsx (1)

115-116: Object.keys(...) as ReviewSatisfaction[] 단언은 가드 패턴으로 바꿔 주세요.

Line 115의 강제 단언은 런타임 안전성을 잃습니다. 백엔드 enum-like 문자열 처리 규칙에 맞게 in 가드(또는 안전한 키 배열 상수)로 순회하는 방식이 더 안전합니다.

As per coding guidelines For enum-like string types from backend, use in operator guard with fallback instead of simple as type assertion.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/common/modals/group-study-review-modal.tsx` around lines 115 -
116, Replace the unsafe type assertion "(Object.keys(SATISFACTION_CONFIG) as
ReviewSatisfaction[])" with a runtime-safe guard: iterate over a validated keys
array or filter Object.keys(...) using an "in" check against SATISFACTION_CONFIG
(or use a constant array of allowed ReviewSatisfaction keys), then cast only
after the guard; update the map call (the expression iterating
SATISFACTION_CONFIG) to use that guarded keys list so each "key" is guaranteed
to be a valid ReviewSatisfaction at runtime.

src/app/(service)/(my)/my-study-review/group/[groupStudyId]/_components/evaluation-section.tsx (1)

26-27: ⚠️ Potential issue | 🟠 Major

showToggle=false일 때 항목이 영구히 잘립니다.

Line 26에서 visible 계산이 showToggle을 고려하지 않아, 토글 버튼이 없는 카드도 5개까지만 보입니다.

수정 예시

-  const visible = expanded ? items : items.slice(0, DEFAULT_SHOW_COUNT);
+  const visible =
+    !showToggle || expanded ? items : items.slice(0, DEFAULT_SHOW_COUNT);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@src/app/`(service)/(my)/my-study-review/group/[groupStudyId]/_components/evaluation-section.tsx
around lines 26 - 27, The visible calculation wrongly ignores showToggle: update
the logic that sets visible (currently using expanded, items,
DEFAULT_SHOW_COUNT) to respect showToggle so that when showToggle is false all
items are shown; modify the expression that computes visible (and adjust hasMore
if needed) to branch on showToggle (e.g., if !showToggle then visible = items
and hasMore = false, otherwise preserve the existing expanded / slice behavior).

src/hooks/common/use-group-study-review-reminder.ts (2)

73-78: useEffect 의존성 배열에 객체 참조 사용

pendingStudy는 매 렌더링마다 새로 생성되는 객체이므로 참조가 변경됩니다. hasAutoOpenedRef로 보호되어 있어 현재 동작에는 문제가 없지만, pendingStudy?.studyId처럼 primitive 값을 의존성으로 사용하면 불필요한 effect 실행을 방지할 수 있습니다.

🔧 의존성 개선 제안

  useEffect(() => {
    if (pendingStudy && allLoaded && !hasAutoOpenedRef.current) {
      hasAutoOpenedRef.current = true;
      setShowReviewModal(true);
    }
- }, [pendingStudy, allLoaded]);
+ }, [pendingStudy?.studyId, allLoaded]);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/hooks/common/use-group-study-review-reminder.ts` around lines 73 - 78,
useEffect currently depends on the object pendingStudy which is recreated each
render; change the dependency to a stable primitive (e.g.,
pendingStudy?.studyId) so the effect only runs when the actual study changes:
update the dependency array in the useEffect that checks pendingStudy,
allLoaded, hasAutoOpenedRef and calls setShowReviewModal to use
pendingStudy?.studyId (and allLoaded) instead of pendingStudy to avoid
unnecessary effect runs while keeping the hasAutoOpenedRef protection.

---

80-89: 타입 단언(type assertion) 대신 명시적 객체 생성 권장

as GroupStudyDetailInfoResponseDto / as GroupStudyBasicInfoResponseDto 단언은 pendingStudy에 DTO에서 요구하는 필드가 모두 있다고 가정하지만, 실제로는 title, startTime, endTime만 사용하고 있습니다. 이 방식은 타입 안전성을 떨어뜨리고, DTO 타입이 변경될 때 런타임 문제가 발생할 수 있습니다.

모달 컴포넌트가 실제로 필요로 하는 필드만 포함하는 별도의 인터페이스를 정의하거나, Partial<T> 또는 Pick<T, K>을 사용하는 것을 권장합니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/hooks/common/use-group-study-review-reminder.ts` around lines 80 - 89,
The current use of type assertions on reviewDetailInfo and reviewBasicInfo
(casting to GroupStudyDetailInfoResponseDto / GroupStudyBasicInfoResponseDto) is
unsafe; instead create explicit, narrower shapes using Pick or a local interface
and construct objects with only the fields you actually use from pendingStudy
(e.g., map title, startDate, endDate), or type them as Partial/ Pick<...> to
reflect the subset; update the code that defines reviewDetailInfo and
reviewBasicInfo to build plain objects from pendingStudy without "as" assertions
and reference the new narrower type (or Partial/ Pick) so TypeScript enforces
the correct fields at compile time.